<template>
	<view>
		<!-- 搜索 -->
		<view class="search">
			<view class="search__box">
				<input class="search__box__input" confirm-type="text" type="text" @confirm="searchText" v-model="title"/>
				<view class="search__box__content" v-if="title == ''">
					<image class="search__box__content__img" src="/static/icon/search.png" mode=""></image>
					<view class="search__box__content__text">
						<text>请输入关键词</text>
					</view>
				</view>
				<view class="search__box__icon" v-if="title != ''" @click="reset">
					<image class="search__box__icon__img" src="/static/icon/password_icon_del.png" mode=""></image>
				</view>
			</view>
		</view>
		<scroll-view class="" style="flex: 1;" scroll-y scroll-with-animation>
			<view class="" style="padding:0 30rpx;display: flex;flex-direction: column;" v-if="data_list.length > 0" v-for="(item,index) in data_list" :key="index">
				<view class=""  @click="dial(item.realname,item.phone)" style="display: flex;justify-content: space-between;width: 96%;height: 40rpx;padding: 16rpx;border-bottom: 1rpx #F8F8F8 solid;">
					<text style="color: #666666;font-size: 26rpx;text-align: center;line-height: 40rpx;lines: 1;">{{item.realname}}</text>
					<text style="color: #3172B6;font-size: 26rpx;text-align: center;line-height: 40rpx;lines: 1;">{{item.phone}}</text>
				</view>
			
			</view>
			
			
			<view class="" v-if="data_list.length <= 0" style="padding:0 30rpx;display: flex;flex-direction: column;" v-for="(item,index) in navs" :key="index">
				<view class="" @click="flagCard(index,item.delFlag)" style="display: flex;justify-content: space-between;width: 96%;height: 40rpx;padding: 16rpx;border-bottom: 1rpx #F8F8F8 solid;">
					<text style="color: rgba(51,51,51,1);font-size: 36rpx;text-align: center;line-height: 40rpx;lines: 1;">{{item.departName}}</text>
					 
					<image v-if="item.delFlag" src="/static/icon/address_down.png" mode="" class="icon1"></image>
					<image v-else src="/static/icon/address_right.png" mode="" class="icon2"></image>					 
				</view>
				<view v-show="item.delFlag" class="" style="display: flex;justify-content: space-between;width: 96%;min-height: 40rpx;padding: 16rpx;flex-direction: column;border-bottom: 1rpx #F8F8F8 solid;"
				 v-if="!item.isLeaf" v-for="(item1,index1) in item.children" :key="index1 + 'one'">


					<view class="" @click="flagTwoCard(index,index1,item1.delFlag)" style="display: flex;justify-content: space-between;width: 96%;height: 40rpx;padding: 16rpx;">
						<text style="color: rgba(102,102,102,1);font-size: 34rpx;text-align: center;line-height: 40rpx;lines: 1;">{{item1.departName}}</text>
						 <image v-if="item1.delFlag" src="/static/icon/address_down.png" mode="" class="icon1"></image>
						 <image v-else src="/static/icon/address_right.png" mode="" class="icon2"></image>
					</view>

					<view class="" style="display: flex;justify-content: space-between;width: 96%;min-height: 40rpx;padding: 16rpx;flex-direction: column;border-bottom: 1rpx #F8F8F8 solid;"
					 v-show="item1.delFlag" v-if="!item1.isLeaf" v-for="(item2,index2) in item1.children" :key="index2 + 'two'">
						<view class="" @click="getDown(item2.orgCode)" style="display: flex;justify-content: space-between;width: 96%;height: 40rpx;padding: 16rpx;">
							<text style="color: rgba(153,153,153,1);font-size: 30rpx;text-align: center;line-height: 40rpx;lines: 1;">{{item2.departName}}</text>
							<image v-if="item2.orgCode == dwon_org_code" src="/static/icon/address_down.png" mode="" class="icon1"></image>
							<image v-else src="/static/icon/address_right.png" mode="" class="icon2"></image>		
						</view>

						<view class="" style="display: flex;justify-content: space-between;width: 96%;height: 50rpx;padding: 16rpx;flex-direction: column;align-items: center;"
						 v-if="down_list.length>0 &&  dwon_org_code == item2.orgCode" v-for="(item3,index3) in down_list" :key="index3 + 'three'">
							<view class="" @click="dial(item3.realname,item3.phone)" style="display: flex;justify-content: space-between;width: 96%;height: 40rpx;padding: 16rpx;">
								<view class="" style="display: flex;align-items: center;">
									<image src="../../static/icon/tongxun_icon_ren.png" style="width: 30rpx;height: 35rpx;" mode=""></image>
									<text style="color: rgba(153,153,153,1);font-size: 28rpx;line-height: 40rpx;margin-left: 11rpx;">{{item3.realname}}</text>
									
									<!-- <view v-if="item3.post_dictText" class="" style="font-size: 26rpx;margin-left: 24rpx;background-color: #A0C8F2;padding: 6rpx 11rpx;border-radius: 10rpx;color: #FFFFFF;">
										{{item3.post_dictText}}
									</view> -->
								</view>
								
								<text style="color: #3172B6;font-size: 30rpx;text-align: center;line-height: 40rpx;lines: 1;">{{item3.phone}}</text>
							</view>
						</view>

					</view>

				</view>

			</view>

	

		</scroll-view>
	</view>
</template>

<script>
	import {Debounce} from '@/common/utils.js' // 防抖函数（减少函数的调用）
	
	export default {
		data() {
			return {

				navs: [],
				down_list: [], //下级数组
				dwon_org_code: '',
				title: '', //模糊搜索
				data_list:[],

			};
		},
		mounted: function(option) { //option为objectth类型，会序列化上个页面传递的参数

			this.init()

		},
		methods: {
			init() {
				this.$api.fSysAddressQueryTreeListDep().then((res) => {
					console.log(res)
					this.navs = res.data.result
					this.navs.forEach((item, index) => {
						item.delFlag = false
						if (!item.isLeaf) {
							item.children.forEach((item1, index1) => {
								item1.delFlag = false
							})
						}

					})
				})
			},

			getShowSecond(e, tag, num) {
				let self = this;
				console.log(tag)
				self.listIndex = num
				if (self.tags == tag) {
					return
				}
				self.tags = tag

				self.imgSecondList = null
				self.firstChoice = 0
				self.secondChoice = 0
				self.showSecond = e.currentTarget.dataset.id;

			},
			flagCard(index, delFlag) {
				this.navs.forEach((item, index) => {
					item.delFlag = false
					if (!item.isLeaf) {
						item.children.forEach((item1, index1) => {
							item1.delFlag = false
						})
					}
				})
				if (!delFlag) {
					this.navs[index].delFlag = true
				}

			},
			reset() {
				this.title = ''
				this.data_list = []
				
			},
			flagTwoCard(index, index1, delFlag) {
				this.navs.forEach((item, index) => {

					if (!item.isLeaf) {
						item.children.forEach((item1, index1) => {
							item1.delFlag = false
						})
					}

				})

				if (!delFlag) {
					this.navs[index].children[index1].delFlag = true
				}
			},
			getDown(orgCode) {
				if (orgCode == this.dwon_org_code) {
					this.down_list = []
					this.dwon_org_code = ''
					return
				}
				this.$api.fSysAddressQueryByOrgCodeForAppOne({
					orgCode: orgCode,
					pageSize: 999
				}).then((res) => {
					this.dwon_org_code = orgCode
					this.down_list = res.data.result.records
					console.log(this.down_list)
				})
			},
			dial:Debounce(
			function(text, phone){
				uni.showModal({
					title: '提示',
					content: '确认拨打"' + text + '"的电话嘛',
					success: function(res) {
						if (res.confirm) {
							uni.makePhoneCall({
								phoneNumber: phone //仅为示例
							});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});


			}),
			searchText:Debounce(
			function(e){
				this.title = e.target.value
				if(this.title == ''){
					plus.nativeUI.toast("请输入关键词");
					return
				}
				this.$api.fSysAddressQueryByOrgCodeForAppAll({
					realname: this.title,
					pageSize: 9999
				}).then((res) => {
					this.data_list  = res.data.result.records
					if(this.data_list.length <= 0){
						plus.nativeUI.toast("暂无此人");
					}
					
				})
			}),
		},
	}
</script>

<style lang="less">
	.search {
		width: 100%;
		height: 94rpx;
		background-color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
		&__box {
			width: 700rpx;
			height: 80rpx;
			background-color: #F6F6F6;
			border-radius: 30rpx;
			display: flex;
			align-items: center;
			&__input {
				width: 600rpx;
				height: 80rpx;
				position: relative;
				left: 30rpx;
			}
			&__content {
				height: 80rpx;
				background-color: #F6F6F6;
				display: flex;
				align-items: center;
				justify-content: center;
				position: absolute;
				left: 74rpx;
				&__img {
					width: 24rpx;
					height: 24rpx;
				}
				&__text {
					height: 80rpx;
					border-radius: 30rpx;
					display: flex;
					align-items: center;
					font-size: 30rpx;
					color: rgba(153, 153, 153, 1);
					margin-left: 13rpx;
				}
			}
			&__icon {
				width: 30rpx;height: 80rpx;border-radius: 50%;margin-left: 42rpx;display: flex;align-items: center;justify-content: center;
				&__img {
					width: 30rpx;height: 30rpx;border-radius: 50%;
				}
			}
		}
	}
	
	.icon2{
		width: 16rpx;height: 30rpx;
	}
	.icon1{
		width: 30rpx;height: 16rpx;
	}
</style>
